<template>
  <h1 class="box4">
    <span>{{title}}</span>
  </h1>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.box4 {
  line-height: 40px;
  position: relative;
}

.box4 span {
  font-weight: bold;
  padding-right: 10px;
  background-image: -webkit-linear-gradient(top, #fff, #02ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 25px;
  font-style: italic;
  display: inline-block;
  position: relative;
  padding-left: 30px;
}

.box4 span::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/borderBox/box4/tit-small.png) no-repeat left bottom;
  left: 0px;
  top: 0px;
  z-index: 9;
}

.box4 span::after {
  content: '';
  display: block;
  position: absolute;
  width: 232px;
  height: 100%;
  background: url(~@/assets/images/borderBox/box4/tit-small-r.png) no-repeat left bottom;
  left: 100%;
  top: -3px;
  z-index: 9;
}

.box4::before {
  content: '';
  display: block;
  position: absolute;
  width: calc(100% - 300px);
  height: 1px;
  background: #0291b4;
  left: 300px;
  top: 11px;
}

.box4::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #0291b4;
  right: -8px;
  top: 4px;
  background: url(~@/assets/images/borderBox/box4/tit_d.png) no-repeat right center;
}

.box4.l::before {
  width: calc(100% - 400px);
  left: 400px;
}

.box4.l span::after {
  width: 90px;
}

.box4.ll::before {
  width: calc(100% - 500px);
  left: 500px;
}
</style>